<template>
  <view class="step">
    <view class="step-item" v-for="(item,index) in data" :key="index">
      <view class="step-item-left">
        <view :class="['step-item-left-circle',item.active ? 'active' : '']"></view>
        <view class="step-item-left-solid" v-if="index!==data.length-1"></view>
      </view>
      <view class="step-item-right">
        <view class="step-item-right-head">{{ item.status }}</view>
        <view class="step-item-right-content">{{ item.content }}</view>
        <view class="step-item-right-bottom" v-if="item.time">{{ item.time }}</view>
        <!--        <view class="step-item-right-bottom" v-if="item.time">{{ item.time|format }}</view>-->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "l-step",
  props: {
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped lang="scss">
$background-step-color: $u-primary;

.step {
  &-item {
    display: flex;

    &-left {
      flex-shrink: 0;
      width: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-circle {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
        background: #D9D9D9;
        border-radius: 50%;

        &.active {
          background: $background-step-color !important;
        }
      }

      &-solid {
        width: 2rpx;
        height: 100%;
        background: $background-step-color;
      }
    }

    &-right {
      flex: 1;
      margin-left: 20rpx;
      padding-bottom: 20rpx;

      &-head {
        color: #979797;
        line-height: 1.3;
        font-weight: 500;
      }

      &-content {
        font-size: 24rpx;
        color: #979797;
        line-height: 1.5;
      }

      &-bottom {
        margin-top: 20rpx;
        font-size: 20rpx;
        color: #979797;
      }
    }
  }
}
</style>
